<template>
	<div>
		<!-- 操作按钮区域 -->
		<div class="mb-4">
			<el-button type="primary" @click="handleAdd">新增菜单</el-button>
		</div>

		<!-- 表格区域 -->
		<el-table :data="tableData" style="width: 100%" border>
			<el-table-column prop="menuId" label="菜单ID" width="100" />
			<el-table-column prop="parentId" label="父菜单ID" width="100" />
			<el-table-column prop="menuName" label="菜单名称" width="150" />
			<el-table-column prop="menuType" label="菜单类型" width="100">
				<template #default="scope">
					{{ formatMenuType(scope.row.menuType) }}
				</template>
			</el-table-column>
			<el-table-column prop="menuCode" label="菜单编码" width="120" />
			<el-table-column prop="path" label="路由路径" width="150" />
			<el-table-column prop="component" label="组件路径" width="180" />
			<el-table-column prop="icon" label="图标" width="100">
				<template #default="scope">
					<el-icon v-if="scope.row.icon">
						<component :is="scope.row.icon" />
					</el-icon>
				</template>
			</el-table-column>
			<el-table-column prop="sort" label="排序" width="80" />
			<el-table-column prop="visible" label="是否可见" width="100">
				<template #default="scope">
					<el-tag :type="scope.row.visible ? 'success' : 'danger'">
						{{ scope.row.visible ? '是' : '否' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="状态" width="100">
				<template #default="scope">
					<el-tag :type="scope.row.status ? 'success' : 'danger'">
						{{ scope.row.status ? '启用' : '禁用' }}
					</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="create_time" label="创建时间" width="180" />
			<el-table-column prop="update_time" label="更新时间" width="180" />
			<el-table-column label="操作" width="180" fixed="right">
				<template #default="scope">
					<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
					<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 表单对话框 -->
		<el-dialog v-model="dialogVisible" :title="formTitle" width="50%">
			<el-form :model="form" label-width="120px" :rules="rules" ref="formRef">
				<el-form-item label="父菜单" prop="parent_id">
					<el-cascader v-model="form.parent_id" :options="menuOptions"
						:props="{ checkStrictly: true, value: 'menu_id', label: 'menu_name' }" clearable />
				</el-form-item>

				<el-form-item label="菜单名称" prop="menu_name">
					<el-input v-model="form.menu_name" placeholder="请输入菜单名称" />
				</el-form-item>

				<el-form-item label="菜单类型" prop="menu_type">
					<el-radio-group v-model="form.menu_type">
						<el-radio :label="0">目录</el-radio>
						<el-radio :label="1">菜单</el-radio>
						<el-radio :label="2">按钮</el-radio>
					</el-radio-group>
				</el-form-item>

				<el-form-item label="菜单编码" prop="menu_code">
					<el-input v-model="form.menu_code" placeholder="请输入菜单编码" />
				</el-form-item>

				<el-form-item label="路由路径" prop="path" v-if="form.menu_type !== 2">
					<el-input v-model="form.path" placeholder="请输入路由路径" />
				</el-form-item>

				<el-form-item label="组件路径" prop="component" v-if="form.menu_type === 1">
					<el-input v-model="form.component" placeholder="请输入组件路径" />
				</el-form-item>

				<el-form-item label="图标" prop="icon">
					<el-input v-model="form.icon" placeholder="请输入图标名称">
						<template #prefix>
							<el-icon v-if="form.icon">
								<component :is="form.icon" />
							</el-icon>
						</template>
					</el-input>
				</el-form-item>

				<el-form-item label="排序" prop="sort">
					<el-input-number v-model="form.sort" :min="0" />
				</el-form-item>

				<el-form-item label="是否可见" prop="visible">
					<el-switch v-model="form.visible" :active-value="1" :inactive-value="0" />
				</el-form-item>

				<el-form-item label="状态" prop="status">
					<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
				</el-form-item>
			</el-form>

			<template #footer>
				<span class="dialog-footer">
					<el-button @click="dialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
	import axios from 'axios';
	import request from '../utils/request'
	
	import {
		ref,
		reactive,
		computed,
		onMounted
	} from 'vue';

	onMounted(() => {
		inittableData()
	});

	function inittableData() {
		request.get("/menus/page").then(function(res) {
			tableData.value=res.data.list
			console.log(res.data)
		}).catch(function(res) {

		})
	}


	// 表格数据
	const tableData = ref([{
		menuId: 1,
		parentId: 0,
		menuName: '系统管理',
		menuType: 1,
		menuCode: 'system',
		path: '/system',
		component: 'Layout',
		icon: 'Setting',
		sort: 1,
		visible: 1,
		status: 1,
		create_time: '2023-01-01 10:00:00',
		update_time: '2023-01-01 10:00:00'
	}]);

	// 表单相关
	const formRef = ref(null);
	const dialogVisible = ref(false);
	const isEditMode = ref(false);

	const form = reactive({
		menu_id: null,
		parent_id: null,
		menu_name: '',
		menu_type: 0,
		menu_code: '',
		path: '',
		component: '',
		icon: '',
		sort: 0,
		visible: 1,
		status: 1
	});

	const rules = reactive({
		menu_name: [{
			required: true,
			message: '请输入菜单名称',
			trigger: 'blur'
		}],
		menu_code: [{
			required: true,
			message: '请输入菜单编码',
			trigger: 'blur'
		}],
		path: [{
			required: true,
			message: '请输入路由路径',
			trigger: 'blur'
		}],
		component: [{
			required: true,
			message: '请输入组件路径',
			trigger: 'blur'
		}]
	});

	// 菜单选项数据
	const menuOptions = ref([{
		menu_id: 1,
		menu_name: '系统管理',
		children: [{
			menu_id: 2,
			menu_name: '用户管理'
		}]
	}]);

	// 计算属性
	const formTitle = computed(() => {
		return isEditMode.value ? '编辑菜单' : '新增菜单';
	});

	// 方法
	const formatMenuType = (type) => {
		const types = {
			0: '目录',
			1: '菜单',
			2: '按钮'
		};
		return types[type] || '未知';
	};

	const handleAdd = () => {
		resetForm();
		isEditMode.value = false;
		dialogVisible.value = true;
	};

	const handleEdit = (row) => {
		Object.assign(form, row);
		isEditMode.value = true;
		dialogVisible.value = true;
	};

	const handleDelete = (row) => {
		ElMessageBox.confirm('确认删除该菜单吗?', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning'
		}).then(() => {
			tableData.value = tableData.value.filter(item => item.menu_id !== row.menu_id);
			ElMessage.success('删除成功');
		}).catch(() => {
			ElMessage.info('已取消删除');
		});
	};

	const resetForm = () => {
		formRef.value?.resetFields();
		Object.assign(form, {
			menu_id: null,
			parent_id: null,
			menu_name: '',
			menu_type: 0,
			menu_code: '',
			path: '',
			component: '',
			icon: '',
			sort: 0,
			visible: 1,
			status: 1
		});
	};

	const submitForm = () => {
		formRef.value.validate((valid) => {
			if (valid) {
				if (isEditMode.value) {
					// 更新逻辑
					const index = tableData.value.findIndex(item => item.menu_id === form.menu_id);
					if (index !== -1) {
						tableData.value[index] = {
							...form
						};
					}
					ElMessage.success('更新成功');
				} else {
					// 新增逻辑
					const newId = Math.max(...tableData.value.map(item => item.menu_id)) + 1;
					const newMenu = {
						...form,
						menu_id: newId,
						create_time: new Date().toLocaleString(),
						update_time: new Date().toLocaleString()
					};
					tableData.value.push(newMenu);
					ElMessage.success('新增成功');
				}
				dialogVisible.value = false;
			} else {
				console.log('表单验证失败');
				return false;
			}
		});



	};
</script>

<style scoped>
	.mb-4 {
		margin-bottom: 1rem;
	}
</style>